:root {
  --color            : #000;
  --placeholder-color: #999;
  --input-bg-color   : #f7f7f7;
}

.wx-coolui-scroller-search {
  display : flex;
  overflow: hidden;

  .search-inner {
    background-color: var(--input-bg-color, #f7f7f7);
    flex            : 1;
    height          : 68rpx;
    margin-right    : 0rpx;
    padding         : 0 20rpx 0 68rpx;
    position        : relative;
    border-radius   : 5rpx;
    display         : flex;
    overflow        : hidden;

    &.round {
      border-radius: 68rpx;
    }

    .inner {
      position: relative;
      flex    : 1;
    }

    .search-input {
      height     : 68rpx;
      line-height: 68rpx;
      font-size  : 28rpx;
      background : transparent;
      position   : relative;
      z-index    : 5;
      flex       : 1;
      color      : var(--color, #000)
    }

    .search-icon {
      background-repeat  : no-repeat;
      background-position: center;
      background-size    : 28rpx;
      width              : 68rpx;
      height             : 68rpx;
      position           : relative;
      overflow           : hidden;

      &::after {
        content            : "";
        display            : block;
        position           : absolute;
        left               : -68rpx;
        top                : 0;
        width              : 100%;
        height             : 100%;
        z-index            : 10;
        background-size    : 28rpx;
        background-repeat  : no-repeat;
        background-position: center;
        background-image   : url('');
        filter             : drop-shadow(68rpx 0px var(--placeholder-color, #999));
      }
    }

    .search-placeholder {
      position      : absolute;
      left          : 50%;
      top           : 0;
      transform     : translateX(-50%);
      // padding: 0 76rpx;
      font-size     : 28rpx;
      // color      : #999;
      text-align    : center;
      line-height   : 68rpx;
      height        : 68rpx;
      transition    : transform 0.4s, left 0.3s;
      display       : flex;
      color         : var(--placeholder-color, #999);
    }

    .search-close {
      display            : none;
      background-color   : var(--input-bg-color, #f7f7f7);
      width              : 40rpx;
      height             : 100%;
      background-size    : cover;
      position           : absolute;
      right              : 0;
      padding            : 0 20rpx 0 20rpx;
      top                : 50%;
      z-index            : 10;
      transform          : translateY(-50%);
      background-size    : 40rpx;
      background-repeat  : no-repeat;
      background-position: 20rpx center;
      background-image   : url('');
    }
  }

  .button {
    height     : 68rpx;
    line-height: 68rpx;
    font-size  : 28rpx;
    padding    : 0 14px;
  }

  &.on {
    .search-placeholder {
      text-align: left;
      left      : 0rpx;
      transform : translateX(0);
    }

    .button {
      display    : block;
      margin-left: 20rpx;
    }
  }

  &.clearable {
    .search-inner {
      .search-input {
        margin-right: 58rpx;
      }

      .search-close {
        display: block;
      }
    }
  }
}